<template>
  <div>
    <h1 align="center" style="margin: 20px auto">数据包基本信息</h1>
    <div style="margin: 20px auto;display: flex;justify-content: center">
      <tree-select
        v-model="treeSelected"
        style="width: 300px;margin:0 10px"
        check-strictly
        :expand-all="true"
        :load-data="loadData"
        @on-change="handleTreeSelectChange"
        @on-toggle-expand="handleTreeSelectExpand"
        @on-check-change="handleTreeSelectCheckChange"
        @on-select-change="handleTreeSelectClick"
        :data="treeData"/>
      <!--      <Button @click="changeTreeSelectData">不是吧，不是爸爸</Button>-->
      <!--      <Button @click="changeTreeData">更新树数据</Button>-->
      <!--    <Select v-model="model1" style="width:300px" prefix="ios-home">-->
      <!--      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
      <!--    </Select>-->
      <Input v-model="value" placeholder="Enter something..."
             style="width: 300px;margin:0 10px"/>
      <Button type="primary" icon="ios-search" shape="circle" style="margin:0 10px"></Button>
      <Button type="success" shape="circle" style="margin:0 10px">刷新</Button>
      <Button type="info" shape="circle" style="margin:0 10px">清除</Button>
    </div>
    <Table border :columns="table_title" :data="table_data" style="margin: 0px auto"/>
  </div>
</template>

<script>
import TreeSelect from '_c/tree-select'
// import { newTreeData } from '@/mock/data/tree-select'
import { getTreeSelectData } from '@/api/data'

export default {
  name: 'tree_select_page',
  components: {
    TreeSelect
  },
  data () {
    return {
      treeSelected: [112, 113],
      treeData: [],
      value: '',
      table_title: [
        {
          title: '序号',
          key: 'index'
        },
        {
          title: '时间',
          key: 'time'
        },
        {
          title: '源地址',
          key: 'srcURL'
        },
        {
          title: '目的地址',
          key: 'distURL'
        },
        {
          title: '协议',
          key: 'protocol'
        },
        {
          title: '长度',
          key: 'length'
        },
        {
          title: '概要信息',
          key: 'info'
        }
      ],
      table_data: [
        {
          index: '1',
          time: '2022-04-09 21:39:00',
          srcURL: '15.25.1.2',
          distURL: '25.23.215.2',
          protocol: 'UDP',
          length: '44',
          info: 'Ether IP UDP 15.25.1.2:526 25.23.215.2:561 Raw'
        },
        {
          index: '2',
          time: '2022-04-09 21:39:00',
          srcURL: '15.25.1.2',
          distURL: '25.23.215.2',
          protocol: 'UDP',
          length: '44',
          info: 'Ether IP UDP 15.25.1.2:526 25.23.215.2:561 Raw'
        },
        {
          index: '3',
          time: '2022-04-09 21:39:00',
          srcURL: '15.25.1.2',
          distURL: '25.23.215.2',
          protocol: 'UDP',
          length: '44',
          info: 'Ether IP UDP 15.25.1.2:526 25.23.215.2:561 Raw'
        },
        {
          index: '4',
          time: '2022-04-09 21:39:00',
          srcURL: '15.25.1.2',
          distURL: '25.23.215.2',
          protocol: 'UDP',
          length: '44',
          info: 'Ether IP UDP 15.25.1.2:526 25.23.215.2:561 Raw'
        },
        {
          index: '5',
          time: '2022-04-09 21:39:00',
          srcURL: '15.25.1.2',
          distURL: '25.23.215.2',
          protocol: 'UDP',
          length: '44',
          info: 'Ether IP UDP 15.25.1.2:526 25.23.215.2:561 Raw'
        },
        {
          index: '6',
          time: '2022-04-09 21:39:00',
          srcURL: '15.25.1.2',
          distURL: '25.23.215.2',
          protocol: 'UDP',
          length: '44',
          info: 'Ether IP UDP 15.25.1.2:526 25.23.215.2:561 Raw'
        },
        {
          index: '7',
          time: '2022-04-09 21:39:00',
          srcURL: '15.25.1.2',
          distURL: '25.23.215.2',
          protocol: 'UDP',
          length: '44',
          info: 'Ether IP UDP 15.25.1.2:526 25.23.215.2:561 Raw'
        },
        {
          index: '8',
          time: '2022-04-09 21:39:00',
          srcURL: '15.25.1.2',
          distURL: '25.23.215.2',
          protocol: 'UDP',
          length: '44',
          info: 'Ether IP UDP 15.25.1.2:526 25.23.215.2:561 Raw'
        }
      ]
    }
  },
  mounted () {
    getTreeSelectData().then(res => {
      const { data } = res
      this.treeData = data
    })
  },
  methods: {
    changeTreeSelectData () {
      this.treeSelected = [111, 114]
    },
    changeTreeData () {
      // this.treeData = newTreeData
      // this.treeSelected = [];
    },
    handleTreeSelectChange (list) {
      // console.log('=-========', list);
    },
    handleTreeSelectExpand (item) {
      // console.log('toggle expand', item);
    },
    handleTreeSelectCheckChange (selectedArray, item) {
      // console.log(selectedArray, item);
    },
    handleTreeSelectClick (selectArray, item) {
      // console.log(selectArray, item);
    },
    loadData (item, callback) {
      setTimeout(() => {
        let data = [
          // {
          //   id: 111,
          //   title: '1-1-1'
          // },
          // {
          //   id: 112,
          //   title: '1-1-2'
          // },
          // {
          //   id: 113,
          //   title: '1-1-3'
          // },
          // {
          //   id: 114,
          //   title: '1-1-4'
          // }
        ]
        callback(data)
      }, 1000)
    }
  }
}
</script>

<style>

</style>
